<#include "../../common/header.htm">
    <div class="content-wrapper">
        <section class="content">
            <div class="row">
                <div id="call_detail" >
                    <div class="stream_search" >
                        <el-form :inline="true" ref="call_Form" :model="form" class="demo-form-inline">
                            <el-form-item label="呼叫类型">
                                <el-select v-model="form.CALL_TYPE" placeholder="请选择">
                                    <el-option label="主叫" value="0"></el-option>
                                    <el-option label="被叫" value="1"></el-option>
                                    <el-option label="短信发送" value="2"></el-option>
                                    <el-option label="短信接收" value="3"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="对方号码">
                                <el-input v-model="form.PARTY_NUMBER" placeholder="对方号码"></el-input>
                            </el-form-item>
                            <el-form-item class="form_z" label="时间范围">
                                <el-date-picker
                                        v-model="form.begin_time"
                                        name="beginTime"
                                        type="date"
                                >
                                </el-date-picker>
                            </el-form-item>
                            <el-form-item class="el-form-item" label="至">
                                <el-date-picker
                                        v-model="form.end_time"
                                        name="endTime"
                                        type="date"
                                >
                                </el-date-picker>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="onSubmit">分析</el-button>
                            </el-form-item>
                            <el-form-item>
                                <el-button  @click="clear()">重置</el-button>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" class="daobtn" @click="exportExcel">导出</el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                    <div class="callanalysis-detail-head" style="height:58px;">
                        <div class="casemanage-switch casemanage-switchtip">
                            <div class="casemanage-zhexiantu active" :class="{active:showType==0}" @click="showType=0" title="切换为列表显示">
                                <i class="casemanage-switchtip-list"></i><span>列图</span>

                            </div>
                            <!--<div class="casemanage-relative" @click="show()" title="切换为关系图显示">
                                <i class="casemanage-switchtip-d3"></i>
                            </div>-->
                            <div class="casemanage-map" @click="mapDialog()"  title="切换为地图显示">
                                <i class="casemanage-map"></i><span>地图</span>
                            </div>
                        </div>
                    </div>
                    <div class="stream_body" >

                        <div v-show="showType===0">
                            <table id="dg">
                            </table>
                        </div>
                        <div v-show="showType===1">
                            <div id="call_detail_d3"  style="height: 500px;width: 100%">
                            </div>
                        </div>
                        <div v-show="showType===2">
                            <div id="call_detail_map"  style="height: 500px;width: 100%">
                            </div>
                        </div>
                    </div>
                    <!--d3弹窗-->
                    <div id="hidebg"></div>
                    <div id="hidebox">
                        <div class="outAccount_d3_head">话单详情分析关系图</div>
                        <span onClick="hide()" style="cursor:pointer;">X</span>
                    </div>
                </div>
            </div>
        </section>
    </div>
    <script>
	    var caseId=parent.caseId;
		$(document).ready(function(){
			 $(window).resize(function(){
				$('#dg').datagrid('resize',{
                    height:($(window).height())-($('.stream_search').outerHeight(true))-30,
                });
			});
		});
        function findDimensions() {
            //获取窗口高度
            let winHeight;
            if (window.innerHeight)
                winHeight = window.innerHeight;
            else if ((document.body) && (document.body.clientHeight))
                winHeight = document.body.clientHeight;
            $("#hidebox").css("height",(winHeight-100)+"px");
            $("#hidebox-map").css("height",(winHeight-100)+"px");
        }
        findDimensions();
        window.onresize=findDimensions;
        function mapDialog() {

            var param = {
                SERVICE_USER_INFORMATION:call_detail.form.SERVICE_USER_INFORMATION,//对方姓名
                CALL_TYPE: call_detail.form.CALL_TYPE,//呼叫类型
                PARTY_NUMBER: call_detail.form.PARTY_NUMBER,// 对方号码
                PARTY_LOCATION:call_detail.form.PARTY_LOCATION,// 对方号码归属地
                begin_time: getMyDate(call_detail.form.begin_time),// 开始时间
                end_time: getMyDate(call_detail.form.end_time),// 结束时间
                SERVICE_NUMBER:arr,
                CASEMANAGE_ID:caseId
            };
            /*if(parent.window._checkedPhone.length>=1000){
                param.cardList="-1";//默认超过1000个节点为全选，不需要去后台传数据
            };*/
            var d = top.dialog({
                title : '话单明细分析图',
                modal : true,
                url : '${ctx}/phone/record/detailmapdialog',
                height : 800,
                width : 1500,
                data : param,
                onshow : function () {
                }
            });
            d.show();
            return false;
        }
        function mapDialogDan(serverNumber,lac,cid,latb,lngb,address) {
            var param = {
                latb:latb,
                lngb:lngb,
                cid:cid,
                lac:lac,
                address:address,
                cardList:serverNumber,
                caseId:caseId,
            };
            if(parent.parent._checkedPhone.length>=1000){
                param.cardList="-1";//默认超过1000个节点为全选，不需要去后台传数据
            };
            var d = top.dialog({
                title : '疑似居住地分析图',
                modal : true,
                url : '${ctx}/phoneAddress/phonemapDialog',
                height : 800,
                width : 1500,
                data : param,
                onshow : function () {
                }
            });
            d.show();
            return false;
        }
        //d3弹窗
        function show(){
            call_detail.getlist_d3();
        }
        function hide(){
            $("#hidebg").hide();
            $("#hidebox").hide();
        }
        //地图弹窗
        function showMap(){
            $("#hidebg-map").show();
            $("#hidebox-map").show();
            call_detail.getMap();
        }
        function hideMap(){
            $("#hidebg-map").hide();
            $("#hidebox-map").hide();
        }

        let call_detail=new Vue({
            el:"#call_detail",
            data:{
                typeOptions:[
                    {
                        value: '0',
                        label: '主叫'
                    }, {
                        value: '1',
                        label: '被叫'
                    }
                ],
                dialogVisible:false,
                showType:0,
                tableData: [],
                tableData2: [],
                currentPage:1,
                currentPage2:1,
                form: {
                    CALL_TYPE: '',
                    PARTY_NUMBER: '',
                    PARTY_LOCATION: '',
                    begin_time:"",
                    end_time:""
                },
                total:"",
                total2:"",
                accountRivalCard:"",
            },
            filters: {
                formatDate(time) {
                    var date = new Date(time);
                    return formatDate(date, 'yyyy-MM-dd hh:mm');
                },
                formatCallType(type) {
                    switch (type) {
                        case 0:
                            return "主叫";
                        case 1:
                            return "被叫";
                        case 2:
                            return "短信发送";
                        case 3:
                            return "短信接收";
                    }
                },
                formatMoney(value) {
                    if (Number.isInteger(value)) {
                        return value.toString().replace(/(\d)(?=(\d{3})+$)/g,'$1,');
                    } else {
                        return value.toString().replace(/(\d)(?=(\d{3})+\.)/g,'$1,');
                    }
                },
            },
            methods: {
                getCallType(){
                    request({
                        url: 'calltype/list/',
                    }).then(result=>{
                        this.typeOptions=result.data.data;
                    })
                },
                changeMap(){
                    this.showType=2;
                    if(arr){
                        this.getMap();
                    }
                },
                onSubmit() {
                    _checkedCallback()
                },
                clear(formName){
                    this.form={
                        CALL_TYPE: '',
                        PARTY_NUMBER: '',
                        PARTY_LOCATION: '',
                        begin_time:"",
                        end_time:""
                    }
                },
                exportExcel(){
                    if(arr){
                        let a = "callType="+this.form.CALL_TYPE+"&partyNumber="+this.form.PARTY_NUMBER+"&beginTime="+getMyDate(this.form.begin_time)+"&endTime="+getMyDate(this.form.end_time)+"&serviceNumber="+arr+"&caseId="+caseId;
                        window.location.href="${ctx}/callanalysis/export/detail?"+a;
                    }
                },
                getlist(){
                },
                getMap(){
                    request({
                        url: 'callanalysis/detail_map',
                        method: 'post',
                        data:{
                            SERVICE_USER_INFORMATION:this.form.SERVICE_USER_INFORMATION,//对方姓名
                            CALL_TYPE: this.form.CALL_TYPE,//呼叫类型
                            PARTY_NUMBER: this.form.PARTY_NUMBER,// 对方号码
                            PARTY_LOCATION:this.form.PARTY_LOCATION,// 对方号码归属地
                            begin_time: getMyDate(this.form.begin_time),// 开始时间
                            end_time: getMyDate(this.form.end_time),// 结束时间
                            SERVICE_NUMBER:arr,
                            CASEMANAGE_ID:caseId
                        }
                    }).then(result=>{
                        if(result.data.data.allRows){
                            initMap("hidebox-mContent",result.data.data.allRows)
                        }else{
                            initMap("hidebox-mContent",{})
                        }
                    })
                },
                getlist_d3(){
                	var data = {
                			 SERVICE_USER_INFORMATION : this.form.SERVICE_USER_INFORMATION,//对方姓名
                             CALL_TYPE : this.form.CALL_TYPE,//呼叫类型
                             PARTY_NUMBER : this.form.PARTY_NUMBER,// 对方号码
                             PARTY_LOCATION : this.form.PARTY_LOCATION,// 对方号码归属地
                             begin_time : getMyDate(this.form.begin_time),// 开始时间
                             end_time : getMyDate(this.form.end_time),// 结束时间
                             SERVICE_NUMBER : arr,
                             CASEMANAGE_ID:caseId,
                            reqUrl : '${ctx}/callanalysis/detail_d3'
                    }
                	var d = top.dialog({
                        title : '通话详情分析关系图',
                        modal : true,
                        data : data,
                        url : '${ctx}/callanalysis/callAnalysisD3Init',
                        height : 800,
                        width : 1500,
                        onshow : function () {
                    	}
                    });
                    d.show();
                	return false;
                }
            }
        })
        var arr=""
        if (parent._checkedPhone.length){
            _checkedCallback()
        }
        function _checkedCallback() {
            if(parent._checkedPhone.length>0){
                var temArr=deepClone(parent._checkedPhone);
                for (let i = 0; i <temArr.length; i++) {
                    if (temArr[i].indexOf("'")==-1) {
                        temArr[i]="'"+temArr[i]+"'"
                    }
                }
                arr = temArr.toString()
                dg();
            }else{
                arr=""
                dg();
                $("#call_detail_map").html("")
                $("#call_detail_map").css("background-color","#fff")
                D3utils.reload({},"#call_detail_d3");
            }
        }
        /*-----------------------easyui表格-----------------------------*/
        /** 页面初始化完成 **/
        $(function(){
            dg()
        })
        function dg(){
            $('#dg').datagrid({
                url: '${ctx}callanalysis/detail_easyui',
                method: 'post',
                queryParams:{//每次请求的参数
                    serviceUserInformation:call_detail.form.SERVICE_USER_INFORMATION,//对方姓名
                    callType: call_detail.form.CALL_TYPE,//呼叫类型
                    partyNumber: call_detail.form.PARTY_NUMBER,// 对方号码
                    partyLocation:call_detail.form.PARTY_LOCATION,// 对方号码归属地
                    beginTime: getMyDate(call_detail.form.begin_time),// 开始时间
                    endTime: getMyDate(call_detail.form.end_time),// 结束时间
                    serviceNumber:arr,
                    caseId:caseId
                },
                pageSize:30,
                pageList:[30,50,100,150,200],
                pageNumber:1,//当前页号,
                //sortName:"TOTALMONEY",//排序列名称 设置后将向后台传送名为sort的post/get参数
                //sortOrder:"desc",//排序列升降序 设置后将向后台传送名为order的post/get参数

                loadMsg:"正在加载，请稍后",//加载数据时的提示信息
                emptyMsg:"暂无信息",//加载数据为空时的信息
                height: ($(window).height())-($('.stream_search').outerHeight(true))-30,
                rownumbers:true,//序号
                fitColumns: true,//使表格自适应页面宽度
                pagination: true,//是否分页
                singleSelect: true,
                columns:[[ //每一列的具体设置。
                    {field:'SERVICE_NUMBER',title:'机主号码'},
                    {field:'CALL_TYPE',title:'呼叫类型',
                        formatter: function(value,row,index){ //当前值，当前的row，当前的索引
                            switch (value) {
                                case 0:
                                    return "主叫";
                                case 1:
                                    return "被叫";
                                case 2:
                                    return "短信发送";
                                case 3:
                                    return "短信接收";
                            }
                        }
                    },
                    {field:'PARTY_NUMBER',title:'对方号码'},
                    {field:'STARTING_TIME',title:'通话日期', sortable : true,
                        formatter: function(value,row,index){ //当前值，当前的row，当前的索引
                            var date = new Date(value);
                            return formatDate(date, 'yyyy-MM-dd hh:mm');
                        }
                    },
                    {field:'TALK_TIME',title:'通话时长', sortable : true},
                    {field:'CID',title:'基站号（CI）'},
                    {field:'LAC',title:'小区号（LAC））'},
                    {field:'ADDRESS',title:'地址',formatter: function(value,row,index){ //当前值，当前的row，当前的索引
                        var htm = "";
                        if (value){
                            htm='<a onclick="mapDialogDan(\''+row.SERVICE_NUMBER+'\',\''+row.LAC+'\',\''+row.CID+'\',\''+row.LATB+'\',\''+row.LNGB+'\',\''+row.ADDRESS+'\')">'+value+'</a>'
                            }
                            return htm;
                        }}
                ]],
                onHeaderContextMenu: function(e, field){
                    e.preventDefault();
                    if (!cmenu){
                        createColumnMenu();
                    }
                    cmenu.menu('show', {
                        left:e.pageX,
                        top:e.pageY
                    });
                },
                onLoadSuccess: function(){
                }
            });
        }
    </script>
    <script src="${ctx}/bower_components/easyui/common/titleHide.js"></script>
    <style>
        .el-form--inline .el-form-item {
            margin-bottom: 2px;
        }
        .el-input__icon{
            right: 0;
        }
        .callanalysis-detail-head {
            position: absolute;
        }
        #hidebg {
            position:absolute;
            left:0px;
            top:0px;
            background-color:#000;
            width: 100%;
            height: 100%;
            filter:alpha(opacity=60);  /*设置透明度为60%*/
            opacity:0.6;  /*非IE浏览器下设置透明度为60%*/
            display:none;
            z-Index:999;
        }
        #hidebox {
            text-align: right;
            position:absolute;
            width: 96%;
            height: 82%;
            top: 23px;
            left: 2%;
            border-radius: 5px;
            background-color:#fff;
            display:none;
            z-Index:9999;
            padding: 10px;
        }
        #hidebg-map {
            position:absolute;
            left:0px;
            top:0px;
            background-color:#000;
            width: 100%;
            height: 100%;
            filter:alpha(opacity=60);  /*设置透明度为60%*/
            opacity:0.6;  /*非IE浏览器下设置透明度为60%*/
            display:none;
            z-Index:999;
        }
        #hidebox-map {
            text-align: right;
            position:absolute;
            width: 96%;
            height: 82%;
            top: 23px;
            left: 2%;
            border-radius: 5px;
            background-color:#fff;
            display:none;
            z-Index:9999;
            padding: 10px;
        }
        div#hidebox-mContent {
            width: 100%;
            height: 96%;
        }
        .outAccount_d3_head {
            float: left;
            font-size: 20px;
            margin-bottom: 5px;
        }
        #hidebox span{
            font-size: 20px;
        }
        svg {
            height: 96%;
            width: 100%;
        }
        .casemanage-relative:focus {
            border-color: #4695ed;
        }
        .el-table.el-table--fit.el-table--striped.el-table--enable-row-hover {
            border-radius: 4px;
        }
        .el-form-item.form-z {
            margin-right: 7px !important;
        }
        .el-form--inline .el-form-item__label{
            font-size: 13px;
            font-weight: 400;
        }
        .el-input__inner{
            font-size: 12px;
        }
        .stream_body {
            padding-left: 10px;
            padding-right: 10px;
        }
        div#call_detail {
        }
        .stream_search{
            margin: 0;
            padding-bottom:0;
            margin-left: 10px;
        }
        .content {
            padding: 17px 10px 0 15px;
        }
        .el-form-item__label{
            color: #6f7689;
        }
        .el-form--inline .el-form-item{
            margin-top: -11px;
        }
        .el-button{
            padding: 8px 15px;
            width: 70px;
            height: 32px;
            margin-right: -12px;
        }
        .el-button:focus, .el-button:hover {
            background-color: #e7e7e7;
            border-color: #adadad;
        }
        button.el-button.el-button--default:hover {
            color: #333;
        }
        button.el-button.el-button--default:focus {
            color: #333;
        }
        .el-button:active {
            border-color: #adadad;
            background-color: #e7e7e7;
        }

        .el-dialog--small{
            width: 88%;
        }
        .el-button--primary{
            background-color:#4695ed;
            border-color:#4695ed;
        }
        .el-button--primary:focus, .el-button--primary:hover{
            background: #61a8f5;
            border-color: #61a8f5;
        }
        .casemanage-switch .casemanage-list{
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
            border-top-left-radius: 5px;
            border-bottom-left-radius: 5px;
        }
        .el-input__inner{
            border-color: #D2D6DE;
            height: 34px;
            border-color: #e4e4e4;
        }

        .el-input__inner:hover{
            border-color:#4695ed;
        }
        .el-input__inner:focus{
            border-color:#4695ed;
        }
        .el-select:hover .el-input__inner{
            border-color:#4695ed;
        }
    </style>